.chat-sidebar {
  background-color: #fff;
  border-left: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-sidebar > header {
  border-bottom: 1px solid #ddd;
  padding: 0 4px;
  &::after {
    clear: both;
    content: '';
    display: block;
  }

  .tab {
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    bottom: -1px;
    box-sizing: content-box;
    cursor: pointer;
    float: left;
    font-size: 13px;
    margin: 0 6px;
    max-width: 12em;
    overflow: hidden;
    padding: 12px 12px 10px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab:hover {
    color: #4798ef;
  }
  .tab.current {
    border-bottom: 2px solid #4798ef;
    color: #4798ef;
    font-weight: bold;
  }
}

.chat-sidebar > main {
  flex: 1;
  overflow: hidden;
}

.tab-loading {
  padding: 50px;
  :global(.qun-spin) {
    font-size: 32px;
  }
}
